<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../../../../header.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
.row-item {
	margin-left: 15px;
	float: left;
}
#category {
	width: 100px;
}
.ui-btn {
 	margin-left: 10px;
	float: right;	
}
</style>
<body>
	<div class="row-item">
        <label>相关帮助分类</label>
        <select id="category">
        	<option value="0" selected="selected">--全部--</option>
        </select>
    </div>
	<div class="mod-toolbar-top cf" style="margin-top: 10px;">
		<div class="btn" style="margin-top: 30px;">
			<a class="ui-btn" id="batchDelete">批量删除</a>
			<a class="ui-btn ui-btn-sp mrb" id="add">新增</a> 
		</div>
	</div>
	<div class="grid-wrap">  
	    <table id="categoryDetailList"></table>  
	    <div id="Pager"></div>  
	</div>
	<script type="text/javascript">
		//添加图标
		function operationFormat(cellValue, options, rowObject) {
			return '<div class="operating" data-id="' + options.rowId + 
			'"><span class="ui-icon ui-icon-pencil" title="编辑" data-toggle="modal" data-target="#myModal"></span>&nbsp&nbsp'
					+ '<span class="ui-icon ui-icon-trash" title="删除"></span>';
		}
		$(function(){
			var typeId = $("#category").val();
			$("#categoryDetailList").jqGrid({  
				url : "categoryDetail/list",
				postData : {
					'typeId' : typeId
				},
				datatype : "json", 
		        mtype: "POST" ,  
		        styleUI: 'Bootstrap',//设置jqgrid的全局样式为bootstrap样式  
		        colNames: ['操作', 'ID', '参数类别','类别代码', '类别名称', '说明'],  
		        colModel: [  { 
		        		name : 'operating', 
		        		formatter : operationFormat, 
		        		align : 'center',
		        		width : 20, 
		        		sortable : false
		        	},{ 
		        		name: 'id', 
		        		index: 'id', 
		        		align : "center",
		        		width: 40 
		        		//key: true, 
		        		//hidden: false 
		        	},{ 
		        		name: 'typeid', 
		        		index: 'typeid', 
		        		align : "center",
		        		width: 40 
		        	},{ 
		        		name: 'code', 
		        		index: 'code', 
		        		align : "center",
		        		width: 40 
		        	},{ 
		        		name: 'name', 
		        		index: 'name', 
		        		align : "center",
		        		width: 40 
		        	},{ 
		        		name: 'remark', 
		        		index: 'remark', 
		        		align : "center",
		        		width: 40 
		        }],  
		        viewrecords: true,  
		        multiselect: true,  
		        rownumbers: true,  
		        autowidth: true,  
		        height: "70%",  
		        rowNum: 10,  
		        rownumbers: true, // 显示行号  
		        rownumWidth: 35, // the width of the row numbers columns  
		        pager: "#Pager",//分页控件的id  
		       // subGrid: false//是否启用子表格  
		        loadComplete : function() {
					loadover();
				}
		    }); 
			initTableRow();
			initCategorySelect();
			initEvent();
		});
	    //设置每行的高度
		function loadover() {
			var grid = $("#categoryDetailList");
			var ids = grid.getDataIDs();
			for (var i = 0; i < ids.length; i++) {
				grid.setRowData(ids[i], false, {
					height : 35
				});
			}
		}
		
		function initTableRow() {
			for (var i = 1; i <= 4; i++) {
				jQuery("#categoryDetailList").jqGrid('addRowData', i, {});
			}
			loadover();
		}
		
		function initCategorySelect() {
			$.ajax({
				url:encodeURI("categoryType/list"),
				type:"POST",
				success:function(data){
					//alert(JSON.stringify(data));
					$.each(data, function(index, item){
						$("#category").append("<option value="+item.id+">"+item.type+"</option>");
					})
				}
			});	
			
			$("#category").change(function(){
				var typeId = $("#category").val();
				var value = $("#category").find("option:selected").text();
				$("#categoryDetailList").jqGrid('setGridParam',{  // 重新加载数据
					url:"categoryDetail/list",
					postData:{
						"typeId":typeId
					},
					datatype:'json',
					//data : data,   //data 是符合格式要求的需要重新加载的数据 
				}).trigger("reloadGrid");
			})
		}
		
		//button Event
		function initEvent(){
			$("#add").on("click", function(){
				handle.operate("add");
			})
			
			$("#batchDelete").on("click", function(){
				var arrays=new Array();
				var IDS=$("#categoryDetailList").jqGrid("getGridParam","selarrrow");
				if(IDS.length==0){
					Public.tips({
						type:2,
						content: "请选择需要刪除類別的行"
					});
					return;
				}
				for(var i=0;i<IDS.length;i++){
					var rowdata=$("#categoryDetailList").jqGrid("getRowData",IDS[i]);
					arrays.push(IDS[i]);
				}
				$.dialog.confirm("删除的类别将不能恢复，请确认是否删除？", function() {
					$.ajax({
						url : 'categoryDetail/batchdelete',
						type : 'POST',
						dataType : "json",
						data: {
							str:JSON.stringify(arrays)
						},
						async : false,
						success : function(data) {
							if(data.status==200){
								Public.tips({
									content: "批量刪除成功"
								});
								$("#categoryDetailList").jqGrid().trigger("reloadGrid");
							}else{
								Public.tips({
									type:1,
									content: "批量刪除失败"
								})
							}
						},error:function(){
							Public.tips({
								type:1,
								content: "网络出错"
							})
						}
					})
				})
				
			})
			
			$("#categoryDetailList").on("click", ".operating .ui-icon-pencil", function(){
				var rowid = $(this).parent().data("id");
				var rowdata=$("#categoryDetailList").jqGrid("getRowData",rowid);
				handle.operate("edit", rowid, rowdata);
			})
			
			$("#categoryDetailList").on("click", ".operating .ui-icon-trash", function(){
				var rowid = $(this).parent().data("id");
				$.dialog.confirm("删除的类别将不能恢复，请确认是否删除？", function() {
					$.ajax({
						url:encodeURI("categoryDetail/delete"),
						type:"POST",
						data:{
							"id":rowid
						},
						success:function(data){
							if(data.status==200){
								$("#categoryDetailList").jqGrid().trigger("reloadGrid");
							}
						}
					});
				});
			});
		}
		
		handle = {
				operate: function(oper, rowid, rowdata) {
					var title;
					var data={};
					if ("add" == oper) {
						title = "新增参数类别详细";
						data={
							operate: oper,
							callback: this.callback
						}
					} else {
						title = "修改参数类别详细";
						data={
							operate:oper,
							rowdata:rowdata,
							rowid:rowid,
							callback:this.callback
						}
					}
					this.dialog = $.dialog({
						title: title,
						data:data,
						content:"url:categoryDetail/editjsp",
						width: 500,
						height: 250,
						max: false,
						min: false,
						cache: false,
						lock: true
					});
				},
				callback: function() {
					$("#categoryDetailList").jqGrid().trigger("reloadGrid");
				}
			};
	</script>
</body>
</html>